<template>
  <div>
    <vxe-toolbar custom  ref="toolbarRef" >
      <template #buttons>
        <el-button
                type="primary"
                icon="el-icon-plus"
                @click="handleAdd"
                v-if="this.editable"
        >
          新 增
        </el-button>
      </template>
      <template #tools>

        <el-tooltip content="清空筛选" placement="top">
          <vxe-button  icon="vxe-icon-delete" class="tool-btn" @click="$refs.tableRef.clearFilter()" circle></vxe-button>
        </el-tooltip>

        <vxe-button  icon="vxe-icon-refresh" class="tool-btn" @click="refresh" circle style="margin-right: 12px;"></vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-grid
            v-bind="gridOptions"
            id="tableRef"
            ref="tableRef"
            show-footer
            class="mytable-scrollbar"
            :data="list"
            :edit-rules="validRules"
            :tooltip-config="{ zIndex: 9999 }"
            :customConfig="customConfig"
            :menu-config="menuConfig"
            :edit-config="{
                trigger: 'click',
                mode: 'row',
                showUpdateStatus: true,
                showInsertStatus: true,
                beforeEditMethod:beforeEdit}"
            @edit-closed="editClosedEvent"
            @edit-actived="editActivedEvent"
            @menu-click="contextMenuClickEvent">

      <template #delNum_edit="scope">
        <!--<vxe-input v-model="row.tabNo" type="text"></vxe-input>-->
        <vxe-input v-model="scope.row.delNum" type="integer"  :max="scope.row.needNum" :controls="false"
        ></vxe-input>
      </template>

      <template #btn_default="{ row }">
        <template v-if="!isActiveStatus(row) && this.editable">
          <!--<el-tooltip content="修改" placement="top">-->
          <!--<el-button-->
          <!--size="small"-->
          <!--type="primary"-->
          <!--@click="handleUpdate(row)"-->
          <!--&gt;修改-->
          <!--</el-button>-->
          <!--</el-tooltip>-->

          <el-tooltip content="删除" placement="top">
            <el-button
                    icon="el-icon-delete"
                    link
                    size="small"
                    type="primary"
                    @click="handleDelete(row)"
            ></el-button>
          </el-tooltip>
        </template>
        <template v-else>
        </template>
      </template>
    </vxe-grid>
    <select-purchase ref="selectPurchase" @setPurchase="setPurchase"></select-purchase>
  </div>
</template>

<script>
    import {findList, getMaxNum} from "@/api/anwise/purchase/purchase_note_item";
    import {mapGetters} from "vuex";
    import {VXETable} from 'vxe-table'
    import {getDictionary} from "@/api/system/dict"
    import {select} from "@/api/base/region";
    import {Pattern} from "@/utils/validate.js";
    import selectPurchase from './select_purchase.vue';
    import {select as supplierSelect} from "@/api/anwise/supplier";
    import {markRaw} from "vue"


    export default {
        components: {
            selectPurchase,
        },
        props: {
          // 发送单位
          sendOrgId: {
            type: String,
            default: "",
          },
        },
        data() {
            return {
                props: {
                    label: 'nodeName',
                    value: 'id',
                },
                idNo:'',
                deptId:'',
                dateFormat: 'YYYY-MM-DD',
                pickerOptions: {},
                editRow:{},
                rowIndex:'',
                box: false,
                purchaseType:'正常',
                supplierId:'',
                isEdit:false,
                iconSearch:true,
                customerId:undefined,
                searchShow:false,
                provinceList:[],
                cityList:[],
                editable:true,
                list: [],
                customConfig: {
                    storage: true,
                    checkMethod({column}) {
                        if (['facName'].includes(column.field)) {
                            return false
                        }
                        return true
                    },
                },
                menuConfig: {},
                form: {},
                query: {},
                loading: true,
                data: [],
                selectionList: [],
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                subVisible: false,
                direction: 'rtl',
                customerName: "安伟客户表",
                customerTypeList: [],
                nameOptions: [{data: null}],
                validRules: {
                    delNum: [
                        {required: true, message: '要求送货数量必须填写'}
                    ],

                },
                gridOptions: {
                    height: '400px',
                    border: true,
                    showOverflow: true,
                    keepSource: true,
                    size: "medium",
                    rowConfig: {
                        // keyField: 'id',
                        isHover: true
                    },
                    columnConfig: {
                        resizable: true
                    },
                    // editRules: ,
                    columns: [
                        // {type: 'checkbox', width: 50, fixed:'left', visible: true},
                        // {type: 'seq', width: 50, fixed:'left', align: "center"},
                        // {
                        //     title: "通知单编号",
                        //     field: "idNo",
                        //     maxlength:1000,
                        //     minWidth: 150,
                        // },
                        {
                            title: "项",
                            field: "itemNo",
                            maxlength:1000,
                            minWidth: 100,
                        },
                        {
                            title: "采购单号",
                            field: "orderNo",
                            maxlength:1000,
                            minWidth: 150,
                        },
                        {
                            title: "采购单项",
                            field: "orderItem",
                            maxlength:1000,
                            minWidth: 150,
                        },
                        {
                            title: "物料编号",
                            field: "materialNo",
                            minWidth: 150,
                          filters: [{ data: '' }],
                          filterRender: { name: 'FilterInput'}
                        },
                        {
                            title: "物料名称",
                            field: "materialName",
                            minWidth: 200,
                          filters: [{ data: '' }],
                          filterRender: { name: 'FilterInput'}
                        },
                        {
                            title: "客户条码",
                            field: "barCode",
                            minWidth: 200,
                        },
                        {
                            title: "单位",
                            field: "unit",
                            minWidth: 120,
                        },
                        // {
                        //     title: "类别",
                        //     field: "category",
                        //     minWidth: 120,
                        // },
                        {
                            title: "采购数量",
                            field: "num",
                            minWidth: 120,
                        },
                        {
                            title: "尚欠数量",
                            field: "needNum",
                            minWidth: 120,
                            visible:false,
                        },
                        {
                            title: "要求送货数量",
                            field: "delNum",
                            minWidth: 180,
                            editRender: {placeholder: '请输入...', autofocus: '.vxe-input--inner', autoselect: true},
                            slots: {edit: 'delNum_edit'}
                        },
                        {
                            title: "备注",
                            field: "remark",
                            minWidth: 240,
                            editRender:{ name:'EditDownTextarea',maxlength:2000,props:{maxlength:2000,rows:5,showWordCount:true}},
                        },
                        {
                            title: "箱唛",
                            field: "packLabel",
                            minWidth: 350,
                        },
                        {
                            title: "箱唛颜色",
                            field: "labelColor",
                            minWidth: 120,
                        },
                        {
                            field: 'btn',
                            title: '操作',
                            minWidth: 120,
                            align: "center",
                            fixed: "right",
                            visible: true,
                            slots: {default: 'btn_default'}
                        }
                    ]
                },
                supplierDic:[]
            };
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    addBtn: this.validData(this.permission.purchase_main_add, false),
                    viewBtn: this.validData(this.permission.purchase_main_view, false),
                    delBtn: this.validData(this.permission.purchase_main_delete, false),
                    editBtn: this.validData(this.permission.purchase_main_edit, false)
                };
            },
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            },
            subIds() {
                let ids = [];
                this.selectionListSub.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        mounted() {
            this.isEdit = false;
            this.disabledCommit(false);
            this.init();
            this.$nextTick(() => {
                console.log(this.$refs.tableRef)
                console.log(this.$refs.toolbarRef)
                this.$refs.tableRef.connect(this.$refs.toolbarRef);
            })
        },
        methods: {
            init(){
                supplierSelect().then(res=>{
                    this.supplierDic = res.data.data;
                })
            },
            setData(editable,idNo,deptId) {
                if(idNo){
                    this.query.idNo = idNo
                    this.idNo = idNo
                }
                if(deptId) {
                    this.deptId = deptId;
                }
                console.log("aaaaaa", this.idNo)
                // this.customerId = customerId
                this.onLoad(this.page)

                this.editable = editable;
                console.log(this.editable);
            },
            updateStatus(scope){
                this.$refs.tableRef.updateStatus(scope);
            },
            calcSum(list, field) {
                let count = 0
                list.forEach(item => {
                    count += Number(item[field])
                })
                return this.$toFixed(count,2);
            },
            // 在值发生改变时更新表尾合计
            // updateFooterEvent (params) {
            //     let xTable = this.$refs.tableRef
            //     xTable.updateFooter()
            // },
            // footerMethod(table) {
            //     console.log("table",table);
            //     return [
            //         table.columns.map((column, columnIndex) => {
            //             if (columnIndex === 0) {
            //                 return '合计'
            //             }
            //             if ([ 'num','totalPrice'].includes(column.field)) {
            //                 return this.calcSum(table.data, column.field)
            //             }
            //             return null
            //         })
            //     ]
            // },
            refresh(){
                this.page = {
                    pageSize: 10,
                    currentPage: 1,
                }
                this.query = {}
                this.onLoad(this.page)
            },
            pageChange(e){
                this.page = {
                    pageSize: e.pageSize,
                    currentPage: e.currentPage,
                }
                this.onLoad(this.page)
            },

            isActiveStatus(row) {
                const $table = this.$refs.tableRef
                if ($table) {
                    return $table.isEditByRow(row)
                }
            },
            setMaterial(list) {
                const $table = this.$refs.tableRef
                let selectData = markRaw(list);
                console.log(selectData)
                if (!$table.getEditRecord()) {
                    selectData.forEach(item => {
                        let mat = {
                            // id: '',
                            itemNo: this.$refs.tableRef.getTableData().fullData.length + 1,
                            materialNo: item.materialNo,
                            materialName: item.materialName,
                            specification: item.specification,
                            num: 0,
                            deliNum: 0,
                            unit: item.unit,
                            price: 0,
                            packLabel: item.packLabel,
                            labelColor: item.labelColor,
                            deliComplete:'否',
                            barCode:item.barCode,
                            $cellEdit: true
                        }
                        // this.list.push(mat);
                        this.$refs.tableRef.insertAt(mat, -1);
                        console.log(this.list);

                        // }
                    });
                }
            },
            async setPurchase(list) {
                const $table = this.$refs.tableRef
                let selectData = markRaw(list);
                console.log(selectData)
                if (!$table.getEditRecord()) {
                    for (let i = 0; i<selectData.length; i++) {
                        let item = selectData[i];
                        if (!$table.getTableData().fullData.some((val) => (val.orderNo == item.idNo && val.orderItem== item.itemNo))) {
                        let mat = {
                            // id: '',
                            itemNo: this.$refs.tableRef.getTableData().fullData.length + 1,
                            orderNo: item.idNo,
                            orderItem: item.itemNo,
                            materialNo: item.materialNo,
                            materialName: item.materialName,
                            unit: item.unit,
                            num: item.num,
                            needNum:item.needNum,
                            delNum:item.needNum,
                            packLabel: item.packLabel,
                            labelColor: item.labelColor,
                            barCode:item.barCode,
                        }
                        // this.list.push(mat);
                        //     await getMaxNum(mat).then(res => {
                        //         mat.delNum = Number(res.data.data).toFixed(0);
                        //     })
                        this.$refs.tableRef.insertAt(mat, -1);
                        console.log(this.list);
                        }
                    }
                }
            },
            clearAll() {
                this.data = [];
                this.$refs.tableRef.remove();
            },
            handleAdd() {
                if (!this.deptId) {
                    this.$message({
                        type: "error",
                        message: "请先选择供应商!"
                    });
                    return;
                }
                console.log("this.list",this.list);

                this.$refs.selectPurchase.showSelect(this.$refs.tableRef.getTableData().fullData,this.deptId,this.sendOrgId,1);
                // this.isEdit = true;
                // const $table = this.$refs.tableRef
                // if (!$table.getEditRecord()) {
                //     console.log(this.tableRef)
                //     if ($table) {
                //         const obj = $table.insertAt({}, -1).then(res => {
                //             $table.setEditCell(res.row, 'facName');
                //         })
                //         console.log(obj)
                //         // this.searchShow = false
                //         // this.iconSearch = false
                //     }
                // }
            },
            contextMenuClickEvent(data) {
                const menu = data.menu;
                const row = data.row;
                const column = data.column;
                const $table = this.$refs.tableRef
                if ($table) {
                    switch (menu.code) {
                        case 'hideColumn':
                            $table.hideColumn(column)
                            break
                        case 'showAllColumn':
                            $table.resetColumn(true)
                            break
                        case 'copy':
                            // if (XEClipboard.copy(row[column.field])) {
                            //   ElMessage.success('保存成功')
                            // }
                            // ElMessage.success('复制成功')
                            break
                        case 'reload':
                            //  findList()
                            break
                        case 'insertAt':
                            $table.insertAt({}, row || -1).then(({row}) => {
                                $table.setEditCell(row, column || 'name')
                            })
                            break
                        case 'remove':
                            $table.remove(row)
                            break
                        case 'save':
                            // ElMessage.success('保存成功')
                            break
                    }
                }
            },
            disabledCommit(data) {
                this.$emit("disabledCommit",data);
            },
            editActivedEvent(row){//激活单元格事件
                this.isEdit = true;
                this.disabledCommit(true);
            },
            editClosedEvent(row) {
                console.log(row)
                const $table = this.$refs.tableRef;
                $table.clearValidate();
                this.disabledCommit(false);
                // const $table = this.$refs.tableRef
                // console.log($table.getTableData().fullData);
                // const err = this.validEvent(row.row);
                // if (err) {
                //     return
                // }
                // if (row.column.field=='prodNum') {
                //     this.overflowNum(row.row.prodNum, row.row);
                // }

            },
            async handleSaveRow(row) {
                const err = await this.validEvent(row);
                if (err) {
                    return
                }

            },
            async validEvent(row) {
                const $table = this.$refs.tableRef
                const errMap = await $table.validate(row).catch(errMap => errMap)
                return errMap;

            },
            formatType(value) {
                let value2 = "";
                this.customerTypeList.forEach(res => {
                    if (value === res.dictKey) {
                        value2 = res.dictValue;
                    }
                });
                return value2
            },

            // 主表模块
            rowSave(row, done, loading) {
                add(row).then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    done();
                }, error => {
                    window.console.log(error);
                    loading();
                });
            },
            rowUpdate(row, index, done, loading) {
                update(row).then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    done();
                }, error => {
                    window.console.log(error);
                    loading();
                });
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            async handleDelete(row) {
                console.log("row",this.list);
                const $table = this.$refs.tableRef
                if (row.id) {
                    this.$confirm('是否确认删除?', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(() => {
                        $table.remove(row)

                    })
                } else {
                    $table.remove(row)

                }
            },
            // handleDelete() {
            //   if (this.selectionList.length === 0) {
            //     this.$message.warning("请选择至少一条数据");
            //     return;
            //   }
            //   this.$confirm("确定将选择数据删除?", {
            //     confirmButtonText: "确定",
            //     cancelButtonText: "取消",
            //     type: "warning"
            //   })
            //     .then(() => {
            //       return remove(this.ids);
            //     })
            //     .then(() => {
            //       this.onLoad(this.page);
            //       this.$message({
            //         type: "success",
            //         message: "操作成功!"
            //       });
            //       this.$refs.crud.toggleSelection();
            //     });
            // },
            beforeOpen(done, type) {
                if (["edit", "view"].includes(type)) {
                    getDetail(this.form.id).then(res => {
                        this.form = res.data.data;
                    });
                }
                done();
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1
                this.onLoad(this.page, params);
                done();
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            selectionClear() {
                this.selectionList = [];
                if(this.$refs.crud)  this.$refs.crud.toggleSelection();
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            formateDate(list) {
                list.forEach(item => {
                    item.totalPrice = this.$toFixed(item.num * item.price,3);
                })
            },
            onLoad(page, params = {}) {
                this.query.idNo = this.idNo;
                if (this.$refs.tableRef.getInsertRecords().length>0 || this.$refs.tableRef.getRemoveRecords().length>0 ||
                    this.$refs.tableRef.getUpdateRecords().length>0) {
                    this.$confirm("搜索会丢失本次新增/编辑/删除的数据，确定继续吗?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            this.loading = true;
                            console.log('aaaaaaaaaaaa', this.query)
                            findList(Object.assign(params, this.query)).then(res => {
                                const data = res.data.data;
                                // this.page.total = data.total;
                                this.list = data;
                                this.loading = false;
                                this.selectionClear();
                                this.isEdit = false;
                                this.formateDate(this.list);
                            });
                        })
                }else {
                    this.loading = true;
                    console.log('aaaaaaaaaaaa', this.query)
                    params.idNo = this.idNo;
                    findList(Object.assign(params, this.query)).then(res => {
                        const data = res.data.data;
                        // this.page.total = data.total;
                        this.list = data;
                        this.loading = false;
                        this.selectionClear();
                        this.isEdit = false;
                        this.formateDate(this.list);
                    });
                }
            },

        }
    };
</script>

<style scoped>
  :deep(.vxe-pulldown.size--medium){
    z-index: 99999 !important;
  }
  .vxe-table--tooltip-wrapper {
    z-index: 10000 !important;
  }
  :deep(.vxe-table--fixed-right-wrapper){
    z-index: 99999 !important;
  }
</style>
